<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="../css/demo.css">
   <link rel="stylesheet" href="../css/touwei.css">
   <link rel="stylesheet" href="../font/iconfont.css">
   <link rel="stylesheet" href="../css/shangpinye.css">
   <script src="./jQuery.js"></script>


</head>

<body>

   <!-- 右侧边效果 -->
   <aside>
      <p>在线咨询</p>
      <div class="aside_m">
         <span class="iconfont icon-icon-"></span>
         <span>345-78-234</span>
         <span>9点-18点</span>
      </div>

      <div class="aside_m_one">
         关注我们
         <div class="aside_m_one1">

         </div>
      </div>

   </aside>
   <header>
      <!-- 头部 -->
      <div class="header_l" class="gray">
         <p>专柜查询</p>
         <p>帮助中心</p>
      </div>
      <div id="header_m">
         <h2>ARMANI
            <p>beauty</p>
         </h2>


      </div>
      <div class="header_r">
         <p class="button">登录与注册</p>
         <p>我的购物袋
         </p>
      </div>

   </header>
   <!-- 导航部分 -->

   <nav>
      <div class="nav_m">
         <ul>
            <li class="nav_m1">年中狂欢
               <span class="iconfont icon-fenlei
                 "></span>
               <div class="nav_m1_one">
                  <ul>
                     <li>会员礼遇
                        <img src="../images/会员-1920X636_.jpg" alt="">
                     </li>
                     <li>限量礼盒
                        <img src="../images/礼盒入口.jpg" alt="">
                     </li>

                     <li>选择你的底妆
                        <img src="../images/Shade-finder02.jpg" alt="">
                     </li>
                     <!--  <li>选择你的底妆
                      <p>臻礼定制 
                       </p>
                      <p>臻礼定制</p>
                      <p>臻礼定制</p>
                      <p>臻礼定制</p -->
            </li>
         </ul>
      </div>
      </li>
      <li>全部产品
         <div class="nav_m1_two">

            <ul>
               <li>明星产品
                  <img src="../images/明星单品入口.jpg" alt="">
               </li>
               <li>当季主推
                  <img src="../images/红气垫入口.jpg" alt="">
               </li>

            </ul>
         </div>
      </li>
      <li>彩妆专区
         <div class="nav_m1_there">
            <table>
               <tr>
                  <th>唇部</th>
                  <th>面部</th>
                  <th>眼部</th>
                  <th>美容工具</th>

               </tr>
               <tr>
                  <td>唇釉</td>
                  <td>粉底液/气垫</td>
                  <td>眉笔</td>
                  <td>专业化妆刷</td>
               </tr>
               <tr>
                  <td>唇膏</td>
                  <td>妆前隔离</td>
                  <td>眼线</td>

               </tr>
               <tr>
                  <td></td>
                  <td>遮瑕</td>
                  <td>眼影</td>

               </tr>
               <tr>
                  <td></td>
                  <td>腮红/胭脂</td>
                  <td>睫毛膏</td>
               </tr>
            </table>
         </div>
      </li>
      <li>护肤专区
         <div class="nav_m1_fore">
            <table>
               <tr>
                  <th>「黑钥匙」护肤系列</th>
                  <th>光钥新肌护肤系列</th>
                  <th>清洁防晒综合系列</th>
                  <th>男士综合护肤系列</th>

               </tr>
               <tr>
                  <td>基础清洁</td>
                  <td>基础清洁</td>
                  <td>基础清洁</td>
                  <td>洁面嗜喱</td>
               </tr>
               <tr>
                  <td>眼唇保养.</td>
                  <td>眼唇保养</td>
                  <td>防晒隔离</td>
                  <td>舒缓露</td>

               </tr>
               <tr>
                  <td>精华护肤</td>
                  <td>精华护肤</td>
                  <td></td>
                  <td>保湿乳</td>

               </tr>
               <tr>
                  <td>面霜/乳液.</td>

               </tr>
               <tr>
                  <td>特殊修复</td>

               </tr>
            </table>
         </div>
      </li>
      <li>香水专区
         <div class="nav_m1_five">
            <table>
               <tr>
                  <th>高定私藏香氛</th>
                  <th>女士香水系列</th>
                  <th>男士香水系列</th>
                  <th>明星系列</th>

               </tr>
               <tr>
                  <td>全新清新系列</td>
                  <td>阿玛尼挚爱香水</td>
                  <td>阿玛尼寄情香水</td>
                  <td>高定私藏香氛</td>
               </tr>
               <tr>
                  <td>经典系列.</td>
                  <td>全新MY WAY香水</td>
                  <td></td>
                  <td>挚爱系列</td>

               </tr>
               <tr>
                  <td>寄情系列</td>


               </tr>

            </table>
         </div>
      </li>
      <li>大师匠心</li>
      </ul>

      <div class="nav_r"> <span>红管</span>
         <span class="iconfont icon-search"></span>
      </div>



   </nav>

   <!-- 中间部分 -->

   <main>
      <div class="box1">
         <span>首页</span>
         <span>></span>
         <span>护肤专区</span>
         <span>></span>
         <span>黑曜石系列</span>
      </div>
      <p class="hgroup1">「黑钥匙」护肤系列</p>
      <hgroup>

         <p class="hgroup2">面霜乳液</p>
         <p class="hgroup2">特殊修复</p>
         <p class="hgroup2">眼唇保养</p>
         <p class="hgroup2">修颜面霜</p>
         <p class="hgroup2">基础清洁</p>
         <p class="hgroup2">精华护肤</p>
         <p class="hgroup3">产品筛选</p>
         <p class="hgroup4">价格 <span>+</span></p>
      </hgroup>
      <article>
         <div class="article1">
            <span class="article1-l">产品</span>
            <span class="article1-r">默认排序</span>
         </div>
         <div class="article2">
            <ul>
               <li>默认排序.</li>
               <li>价格由高到低</li>
               <li>价格由低到高</li>
               <li>按上市时间</li>
               <li>明星产品排行</li>
            </ul>
         </div>


         <!-- 第一个轮播图盒子 -->
         <div class="article3">
            <p class="article3-one">HOT</p>

            <div class="article3-two">

               <!-- 第一个轮播图 -->
               <section class="banner">
                  <section class="bannn">
                     <img src="../images/01 (2).png" alt="" class="active">
                     <!-- <img src="../images/05.png" alt="">
                     <img src="../images/04.png" alt=""> -->

                  </section>

                  <input type="button" class="prev" value="<">
                  <input type="button" class="next" value=">">

               </section>

               <!-- 轮播图下面的部分 -->
               <p class="article3-there">阿玛尼黑钥匙至臻奂颜面霜乳霜</p>
               <p class="article3-fore">CREMA NERA SUPREME REVIVING CREAM</p>
               <p class="article3-five">面霜50ml</p>
               <p class="article3-six">★★★★★</p>

               <div class="article3-seven">
                  <span class="article3-seven-l">￥3050</span><span class="article3-seven-r">立即购买</span>
               </div>
            </div>
         </div>

         <!-- 第二个 -->
         <div class="article3">
            <p class="article3-one">HOT</p>

            <div class="article3-two">

               <!-- 第一个轮播图 -->
               <section class="banner">
                  <section class="bannn">
                     <img src="../images/01 (1).png" alt="" class="active">
                     <!-- <img src="../images/02 (1).png" alt="">
                     <img src="../images/绿水-橱窗图1.jpg" alt=""> -->



                     <!-- <img src="../images/15g.png" alt=""> -->




                  </section>

                  <input type="button" class="prev" value="<">
                  <input type="button" class="next" value=">">

               </section>


               <!-- 轮播图下面的部分 -->
               <p class="article3-there">阿玛尼黑钥匙至臻奂颜面霜乳霜</p>
               <p class="article3-fore">CREMA NERA SUPREME REVIVING CREAM</p>
               <p class="article3-five">面霜50ml</p>
               <p class="article3-six">★★★★★</p>

               <div class="article3-seven">
                  <span class="article3-seven-l">￥3050</span><span class="article3-seven-r">立即购买</span>
               </div>
            </div>
         </div>




         <!-- 第三个 -->
         <div class="article3">
            <p class="article3-one">HOT</p>

            <div class="article3-two">

               <!-- 第一个轮播图 -->
               <section class="banner">
                  <section class="bannn">
                     <img src="../images/01 (2).png" alt="" class="active">
                     <!-- <img src="../images/05.png" alt="">
                     <img src="../images/04.png" alt=""> -->

                  </section>

                  <input type="button" class="prev" value="<">
                  <input type="button" class="next" value=">">

               </section>


               <!-- 轮播图下面的部分 -->
               <p class="article3-there">阿玛尼黑钥匙至臻奂颜面霜乳霜</p>
               <p class="article3-fore">CREMA NERA SUPREME REVIVING CREAM</p>
               <p class="article3-five">面霜50ml</p>
               <p class="article3-six">★★★★★</p>

               <div class="article3-seven">
                  <span class="article3-seven-l">￥3050</span><span class="article3-seven-r">立即购买</span>
               </div>
            </div>
         </div>



      </article>


   </main>




   <!-- 尾部 -->
   <footer>

      <div class="footer_o">
         <div class="footer_o1"><span>专柜查询</span>
            <input type="text">
         </div>
         <div class="footer_o2">
            <span>关注我们</span>
            <div class="footer_o2_one">
               <img src="../images/li3.png" alt="">
               <div class="footer_o2_one1">

               </div>
            </div>

            <div class="footer_o2_two">
               <img src="../images/li5.png" alt="">
               <div class="footer_o2_two1">
                  <img src="../images/erweima.2dbf6911.jpg" alt="">
               </div>
            </div>
            <div class="footer_o2_there">
               <img src="../images/li16.png" alt="">
               <div class="footer_o2_there1">
                  <img src="../images/erweima.2dbf6911.jpg" alt="">
               </div>
            </div>
         </div>
      </div>
      <div class="footer_t">
         <table cellspacing="0px" cellpading="0px">
            <tr>
               <th>彩妆专区</th>
               <th>护肤专区</th>
               <th>香水专区</th>
               <th>明星产品</th>
               <th>帮助中心</th>
            </tr>
            <tr>
               <td>唇部</td>
               <td>「黑钥匙」护肤系列</td>
               <td>男士</td>
               <td>阿玛尼[传奇红管J唇釉</td>
               <td>常见问题</td>
            </tr>
            <tr>
               <td>面部</td>
               <td>光钥新肌护肤系列</td>
               <td>女士</td>
               <td>阿玛尼大师[蓝气垫J</td>
               <td>订单查询</td>
            </tr>
            <tr>
               <td>眼部</td>
               <td>清洁防晒综合系列</td>
               <td></td>
               <td>阿玛尼自我无界香水</td>
               <td>订单查询</td>
            </tr>
            <tr>
               <td>美容工具</td>
               <td>男士综合护肤系列</td>

            </tr>
         </table>
      </div>
      <div class="footer_th">
         <img src="../images/li8.png" alt="">
         <p>国家药监局提示您:宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注国妆特字或者“国妆特进字的标准文号。</p>
         <p>
            <span>沪公网安备31010602001530号中国工商 沪ICP备08100043号 21</span>

         </p>
         <p class="footer_th_m">OL'Oreal China欧莱雅(中国)有限公司版权所有</p>
         <p>GIORGIO ARMANI阿玛尼美妆中国官网，GIORGIO ARMANI阿玛尼美妆天猫旗舰店，阿玛尼美妆官方微信精品商城，为官方认证渠道。</p>
      </div>
   </footer>

</html>
<script>
   // 二级菜单点击事件
   document.querySelector(".article1-r").onclick = function () {
      let oDiv = document.querySelector(".article2")
      //  let oSpan = document.querySelector(".article1-r");
      if (oDiv.style.display == 'block') {
         oDiv.style.display = 'none'
      } else {
         oDiv.style.display = 'block'
      }

   }

</script>
<!-- <script>

   //轮播图
   var index = 0;

   function move() {
      index += 1;
      if ($(".bannn>img").length <= index) {
         index = 0;
      }

      $(".bannn>img").eq(index).show(10).siblings().hide(10)
      $(".dots>li").eq(index).addClass("active").siblings().removeClass("active")
   }


   $(".next").on("click", function () {
      move()
   })

   $(".prev").on("click", function () {
      index--;
      if (index < 0) {
         index = $(".bannn img").length - 1
      }
      console.log(index);
      $(".bannn>img").eq(index).show(0).siblings().hide(0);
      $(this).addClass("active").siblings().removeClass("active")
   })




</script> -->


<!-- 商品列表 -->


<script>


   $.getJSON("../goodsAndShoppingCart/getGoodsType.php", function (resText) {
      let p;
      $("hgroup p").click(function () {
         p = `${$(this).index() + 1}`
         $.getJSON("../goodsAndShoppingCart/getGoodsList.php", `typeId=${p}`, function (Text) {
            console.log(Text);
            //   Text=JSON.parse(Text);
            $('.bannn>img').each(function (item, oDom) {
               $(oDom).prop('src', Text[item].goodsImg)
               // $(oDom).prop('src',Text[item].goodsDesc)
            })

            console.log($(".bannn"));
            // $(".bannn").html(b);
            // $("bannn>img").mouseenter(function () {
            //    $(this).parent().prev().prev().attr("src", $(this).attr("src"))
            //    console.log(Text);
            // }

         })
      })

   })
</script>

<script>
   document.getElementsByClassName("article3-seven-r")[0].onclick = function () {

      location.href = "/ARMANI/html/shopping.html"

   }

</script>

<script>
   document.getElementsByClassName("bannn")[0].onclick = function () {
 
      location.href = "/ARMANI/html/xiangqingye.html"

   }
</script>